<template>
	<view class="notice">
		<!-- 选择会员 -->
		<view class="selectMember">
			<view class="member"  @click="editId?false : dialog = true">
				<image src="../../../static/img/quickly/information/add@2x.png"></image>
				<text>{{userName || '选择会员'}}</text>
			</view>
			<view class="save" v-if="status!=2" @click="showModalBtn(1)">保存</view>
			<view class="toSend" v-if="status!=2"  @click="showModalBtn(2)">签名发送</view>
		</view>
		
		<div class="content">
			<div class="title">
				<input type="text" v-model="form.noticeTitle" placeholder="通知标题(10个字以内)" maxlength="10" >
			</div>
			<div class="value">
				<textarea  v-model="form.content" placeholder="请输入通知内容(140个字以内)" :auto-height="true" maxlength="140"/>
				<div class="num"><span>{{form && form.content && form.content.length}}</span>/140</div>
			</div>
		</div>
		<!-- 会员弹框 -->
		<member :dialog.sync="dialog"  @hidedialog="hidedialog" @chooseUser="chooseUser"></member>
		<u-modal v-model="showModal" :content="showContent" :show-cancel-button="true" @confirm="sureconfirm"></u-modal>
	</view>
</template>
<script>
	import member from '@/components/selectMember/selectMember.vue'
	export default {
		components:{member},
		data(){
			return {
				userName:'',
				dialog:false,
				textareNum:0,
				form:{},
				showModal:false,
				showContent:'',
				editId:'',
				status:''
			}
		},
		onLoad(options){
			if(options.id){
				this.editId = options.id
				this.status = options.status
				uni.setNavigationBarTitle({title:'编辑发送通知'})
				this.$api.messageNoticeInfo(options.id).then((res)=>{
					this.form = res.data.result
					this.userName = res.data.result.realName
					this.userId = res.data.result.userId
				})
			}
		},
		methods:{
			hidedialog(){
				this.dialog = false
			},
			showModalBtn(e){
				if(!this.userName) {
					uni.showToast({
						title: '请先选择会员',
						icon: 'none'
					})
					return
				}
				if(!this.form.noticeTitle) {
					uni.showToast({
						title: '请输入标题',
						icon: 'none'
					})
					return
				}
				if(!this.form.content) {
					uni.showToast({
						title: '请输入内容',
						icon: 'none'
					})
					return
				}
				if(e == 2){
					this.showModal = true
					this.showContent = '确认信息无误,签名并发送给用户存入健康档案,发送后该信息将不可修改';
					return
				}
				this.save(4)
			},
			chooseUser(e){ //选择会员
				this.userName = e.userName;
				this.userId = e.userId;
			},
			save(e){
				this.form.userId = this.userId
				this.form.status = e
				if(!this.editId){
					this.$api.messageNoticeSave(this.form).then((res)=>{
						if(res.data.returnCode =='200') {
							uni.showToast({title: '保存成功',icon: 'none'})
							setTimeout(() => {
								uni.navigateTo({url:'/pages/quickly/notice/noticelist'})
							},1000)
						}else{
							uni.showToast({title: res.data.message,icon: 'none'})
						}
					})
				}else{
					this.$api.messageNoticeUpdate(this.form).then((res)=>{
						if(res.data.returnCode =='200') {
							uni.showToast({title: '保存成功',icon: 'none'})
							setTimeout(() => {
								uni.navigateTo({url:'/pages/quickly/notice/noticelist'})
							},1000)
						}else{
							uni.showToast({title: res.data.message,icon: 'none'})
						}
					})
				}
			},
			sureconfirm() {
				this.save(2)
			},
		}
	}
</script>
<style lang="scss" scoped>
	.notice{
		min-height: calc(100vh - 88upx);
		background: #F8F8F8;
	}
	.selectMember {
		position: fixed;
		top: 88upx;
		left: 0;
		width: 750upx;
		height: 130upx;
		background-color: #38CB97;
		padding: 34upx 24upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		z-index: 10;
		.member {
			flex: 1;
			margin-right: 45upx;
			height: 62upx;
			background-color: #FFFFFF;
			border-radius: 6upx;
			line-height: 62upx;
			image {
				width: 26upx;
				height: 26upx;
				margin: 0 18upx;
			}
			text {
				color: #38CB97;
				font-size: 30upx;
			}
		}
		.save {
			width: 138upx;
			height: 62upx;
			line-height: 62upx;
			text-align: center;
			border-radius: 8upx;
			background: #D0FFEE;
			color: #333333;
			margin-right: 19upx;
			font-size: 28upx;
		}
		.toSend {
			background-color: #16AE78;
			width: 138upx;
			height: 62upx;
			line-height: 62upx;
			text-align: center;
			border-radius: 8upx;
			color: #FFFFFF;
			font-size: 28upx;
		}
	}
	.content{
		padding: 130upx 24upx 0 24upx;
		background: #fff;
		.title{
			input{
				height: 110upx;
				line-height: 110upx;
				font-size: 30upx;
				border-bottom: 1upx solid #E0E0E0;
			}
		}
		textarea{
			padding:40upx 0;
			width: 100%;
			font-size: 30upx;
			min-height: 600upx;
		}
		.value{
			position: relative;
			.num{
				font-size: 26upx;
				position: absolute;
				right: 0upx;
				bottom: 32upx;
				span{
					color: #999;
				}
			}
		}
	}
</style>
